<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Layout with Dijit</title>
		<link rel="stylesheet" href="css/demo.css" media="screen">
		<link rel="stylesheet" href="css/style.css" media="screen">
		<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
			<style type="text/css">
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dijit/themes/claro/claro.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

/*Grid need a explicit width/height by default */
#grid {
    width: 50em;
    height: 30em;
}
		</style>
	</head>
	<body class="claro">
		<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
		
			<div class="edgePanel" style="Height:120px" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)
				<div id="mainMenu" data-dojo-type="dijit/MenuBar">
					<div id="edit" data-dojo-type="dijit/MenuBarItem">
					Edit
					</div>
					<div id="view" data-dojo-type="dijit/MenuBarItem">
					View
					</div>
					<div id="task" data-dojo-type="dijit/PopupMenuBarItem">
						<span>Task</span>
						<div id="taskMenu" data-dojo-type="dijit/Menu">
							<div id="complete" data-dojo-type="dijit/MenuItem">
							Mark as Complete
							</div>
							<div id="cancel" data-dojo-type="dijit/MenuItem">
							Cancel
							</div>
							<div id="begin" data-dojo-type="dijit/MenuItem">
							Begin
							</div>
						</div>
					</div><!-- end of sub-menu -->
				</div>
			</div>
			
			<div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left'">Sidebar content (left)
				<div id="mainMenu2" data-dojo-type="dijit/Menu">
					<div id="edit2" data-dojo-type="dijit/MenuItem">
					Edit
					</div>
					<div id="view2" data-dojo-type="dijit/MenuItem">
					View
					</div>
					<div id="task2" data-dojo-type="dijit/PopupMenuItem">
						<span>Task</span>
						<div id="taskMenu2" data-dojo-type="dijit/Menu">
							<div id="complete2" data-dojo-type="dijit/MenuItem">
							Mark as Complete
							</div>
							<div id="cancel2" data-dojo-type="dijit/MenuItem">
							Cancel
							</div>
							<div id="begin2" data-dojo-type="dijit/MenuItem">
							Begin
							</div>
						</div>
					</div><!-- end of sub-menu -->
				</div>
			
			</div>
			
			<div id ="tabs" style="height:1300px" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', tabPosition: 'top'">
				<div data-dojo-type="dijit/layout/ContentPane" title="Group 1">
					<button id="btnAddTab" data-dojo-type="dijit/form/Button" type="button">
						Add New Tab
					</button>				
					<div id="gridDiv" ></div>							
				</div>
				<div data-dojo-type="dijit/layout/ContentPane" title="Group Two">
						
				</div>
				<div data-dojo-type="dijit/layout/ContentPane" title="Long Tab Label for this One">
					<h4>Group 3 Content</h4>
				</div>
			</div>
			
			<div id="bottom" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter: true">Page Footer</div>
		</div>
		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js"></script>
		<script>

			require(["dojo/dom", 
			"dojo/parser", 
			"dojo/ready", 
			"dojo/on", 
			"dijit/form/Button",
			"dojox/layout/ContentPane",
			"dijit/registry",
			"dijit/layout/TabContainer",
			"dojo/mouse",
			"dijit/layout/BorderContainer"], function(dom, parser, ready, on, Button, ContentPane, registry, TabContainer){
				
			ready(function(){					
					parser.parse();
					
					on(dom.byId("btnAddTab"), "click", function(){
					var tabs = registry.byId("tabs");
					
					//var cp1 = new ContentPane({
					//	title: "Food",
					//	content: "We offer amazing food"
					//});
					//tabs.addChild(cp1);
					
					var pane = new ContentPane({ title:"Remote Content", href: "defineSimpleMoudle.html" });
					pane.set("onDownloadEnd", function(){
						//parser.parse(pane);
						console.log("parse after end.");
					});
					//pane.placeAt(tabs);
					tabs.addChild(pane);
					});		
					
				dojo.require("dojox.grid.EnhancedGrid");
				dojo.require("dojox.grid.enhanced.plugins.Pagination");
				dojo.require("dojo.data.ItemFileWriteStore");
				
				(function(){
					/*set up data store*/
					var data = {
					  identifier: 'id',
					  items: []
					};
					var data_list = [
					  { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
					  { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
					  { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
					];
					var rows = 200;
					for(var i=0, l=data_list.length; i<rows; i++){
					  data.items.push(dojo.mixin({ id: i +1 }, data_list[i%l]));
					}
					
					var store = new dojo.data.ItemFileWriteStore({data: data});

					/*set up layout*/
					var layout = [[
					  {name: 'id', field: 'id'},
					  {name: 'IsOld', field: 'col2'},
					  {name: 'desc', field: 'col3', width: "230px"},
					  {name: 'price', field: 'col4'}
					]];

					/*create a new grid:*/
					var grid = new dojox.grid.EnhancedGrid({
						id: 'grid',
						store: store,
						structure: layout,
						rowSelector: '20px',
						 plugins: {
						  pagination: {
							 pageSizes: ["20", "50", "100", "All"],
							  description: true,
							  sizeSwitch: false,
							  pageStepper: true,
							  gotoButton: true,
							  maxPageStep: 5//,
							  //position: "top"
						  }
						}
					}, document.createElement('div'));

					/*append the new grid to the div*/
					dojo.byId("gridDiv").appendChild(grid.domNode);
					
					/*Call startup() to render the grid*/
					grid.startup();
					//grid.resize();
				})();
				
			});
			});
			
		</script>
	</body>
</html>
